<template>
  <div class="group-table-box">
    <el-row class="group-top">
      <el-col :span="24" class="group-top">
        <div class="input-item input-flex">
          <span>商品名称：</span>
          <el-input
            v-model="form.groupName"
            placeholder="商品名称"
            style="width: 100px;"
            size="small"
          ></el-input>
        </div>

        <div class="input-item input-flex">
          <span>商品分类：</span>
          <el-input
            v-model="form.createName"
            placeholder="商品分类"
            style="width: 100px;"
            size="small"
          ></el-input>
        </div>

        <div class="input-item input-flex">
          <span>创建时间：</span>
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onClickDatePickerChange"
            size="small"
          >
          </el-date-picker>
        </div>

        <div class="input-item">
          <el-button
            type="primary"
            size="small"
            @click="onClickSearch"
          >搜索</el-button>
          <el-button
            type="warning"
            size="small"
            @click="onClickReset"
          >重置搜索</el-button>
        </div>
      </el-col>

      <el-col :span="6" class="group-right">
        <div class="input-item" style="margin-right: 0;">
          <el-button
            type="primary"
            size="small"
            @click="clickAddModal"
          >新增商品</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        :header-cell-class-name="'table-header'"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="所属商品分类">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="是否精选"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="form.switchVal"
              placement="top"
            >
              <el-switch
                v-model="form.switchVal"
                active-value="on"
                inactive-value="off">
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="初始价格">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="折扣价">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="已售量">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="250px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="check(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="screen(scope.$index, scope.row)"
            >筛选名单</el-button>
            <el-tooltip
              :content="form.switchVal"
              placement="top"
              style="margin-left: 10px;"
            >
              <el-switch
                v-model="form.switchVal"
                active-value="on"
                inactive-value="off">
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="form.pageIndex"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="totalPageCount"
        style="text-align: center;margin-top: 20px;"
      >
      </el-pagination>
    </div>

    <!-- 点击新增活动 -->
    <el-dialog
      :visible.sync="showAddModal"
    >
      <div class="modal-container">
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">商品名称</p>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="form.name"
              placeholder="请输入..."
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">商品分类</p>
          </el-col>
          <el-col :span="20">
            <el-select v-model="form.class" placeholder="请选择" size="small">
              <el-option value="撒钱活动">撒钱活动</el-option>
              <el-option value="VIP活动">VIP活动</el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">商品邮费</p>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="form.name"
              placeholder="请输入..."
              size="small"
            >
              <span slot="append">元</span>
            </el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">商品原价</p>
            <p class="modal-label-detail">（含税）</p>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="form.name"
              placeholder="请输入..."
              size="small"
            >
              <span slot="append">元</span>
            </el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">商品折扣价</p>
            <p class="modal-label-detail">（含税）</p>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="form.name"
              placeholder="请输入..."
              size="small"
            >
              <span slot="append">元</span>
            </el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">推荐说明</p>
            <p class="modal-label-detail">（若不填写则不展示）</p>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="form.levelInfo"
              type="textarea"
              :rows="4"
              placeholder="请输入..."
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">商品说明</p>
            <p class="modal-label-detail">（单张图尺寸建议222*222，至多可上传8张）</p>
          </el-col>
          <el-col :span="20">
            <el-upload
              class="upload-demo"
              drag
              action="/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">是否展示优秀测评</p>
          </el-col>
          <el-col :span="20">
            <el-tooltip
              :content="form.switchVal"
              placement="top"
            >
              <el-switch
                v-model="form.switchVal"
                active-value="on"
                inactive-value="off">
              </el-switch>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="4">
            <p class="modal-label">是否展示销售量</p>
          </el-col>
          <el-col :span="20">
            <el-tooltip
              :content="form.switchVal"
              placement="top"
            >
              <el-switch
                v-model="form.switchVal"
                active-value="on"
                inactive-value="off">
              </el-switch>
            </el-tooltip>
          </el-col>
        </el-row>
        <div slot="footer" class="modal-footer">
          <el-button
            type="primary"
            @click="onClickAddConfirm"
            size="small"
          >完成</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      switch1: false,
      showAddModal: false,
      isLoading: false,
      form: {
        pageIndex: 1,
      },
      totalPageCount: 10,
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  watch: {
  },
  methods: {
    onClickSearch() {

    },
    onClickReset() {

    },
    onClickDeleteConfirm() {

    },
    clickAddModal() {
      // 点击新增商品
      this.showAddModal = true
    },
    check(index) {
      //  点击修改按钮
      this.showAddModal = true
    },
    onClickAddConfirm() {

    },
    success(index) {

    },
    remove(index) {

    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
  font-size: 12px;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 14px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
